<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	template="../templates/ui.xhtml">
        
    <ui:define name="head">
        <style type="text/css">
            .ui-tree {
                width: 300px
            }
            
            #form\:tree1 {
                float: right;
            }
            
            #form\:tree2 {
                float: left;
            }
        </style>       
    </ui:define>

	<ui:define name="content">
		<h1 class="title ui-widget-header ui-corner-all">Tree - DragDrop</h1>

		<div class="entry">
			<p>Tree supports drag and drop based reordering of nodes. In addition to the single tree support, multiple trees can also be grouped for data transfer. 
                Optional  <i>dragdrop</i> event is provided as an ajax callback as well.</p>

			<h:form id="form">

                <p:growl id="msgs" showDetail="true" />
                
                <h:panelGrid columns="3">
                    <p:tree id="tree1" value="#{treeBean.root}" var="node" selectionMode="single" selection="#{treeBean.selectedNode}" 
                            draggable="true" droppable="true" dragdropScope="demo">
                        <p:ajax event="dragdrop" listener="#{treeBean.onDragDrop}" update=":form:msgs" />
                        <p:treeNode>
                            <h:outputText value="#{node}" />
                        </p:treeNode>
                    </p:tree>
        
                    <p:graphicImage alt="Transfer" url="/images/transfer.png" />
                    
                    <p:tree id="tree2" value="#{treeBean.root2}" var="node" selectionMode="single" selection="#{treeBean.selectedNode2}" 
                            draggable="true" droppable="true" dragdropScope="demo">
                        <p:ajax event="dragdrop" listener="#{treeBean.onDragDrop}" update=":form:msgs" />
                        <p:treeNode>
                            <h:outputText value="#{node}" />
                        </p:treeNode>
                    </p:tree>

                </h:panelGrid>
                
                <h:commandButton value="Submit" />
                                
			</h:form>
			
			<h3>Source</h3>
			<p:tabView>
				<p:tab title="tree.xhtml">
					<pre name="code" class="xml">
&lt;h:form id="form"&gt;

    &lt;p:growl id="msgs" showDetail="true" /&gt;

    &lt;h:panelGrid columns="3"&gt;
        &lt;p:tree id="tree1" value="\#{treeBean.root}" var="node"  selectionMode="single" selection="\#{treeBean.selectedNode}" 
                draggable="true" droppable="true" dragdropScope="demo"&gt;
            &lt;p:ajax event="dragdrop" listener="\#{treeBean.onDragDrop}" update=":form:msgs" /&gt;
            &lt;p:treeNode&gt;
                &lt;h:outputText value="\#{node}" /&gt;
            &lt;/p:treeNode&gt;
        &lt;/p:tree&gt;

        &lt;p:graphicImage alt="Transfer" url="/images/transfer.png" /&gt;

        &lt;p:tree id="tree2" value="\#{treeBean.root2}" var="node" selectionMode="single" selection="\#{treeBean.selectedNode2}" 
                draggable="true" droppable="true" dragdropScope="demo"&gt;
            &lt;p:ajax event="dragdrop" listener="\#{treeBean.onDragDrop}" update=":form:msgs" /&gt;
            &lt;p:treeNode&gt;
                &lt;h:outputText value="\#{node}" /&gt;
            &lt;/p:treeNode&gt;
        &lt;/p:tree&gt;
    &lt;/h:panelGrid&gt;

&lt;/h:form&gt;
					</pre> 
				</p:tab>
				
				<p:tab title="TreeBean.java">
					<pre name="code" class="java">
package org.primefaces.examples.view;

import java.io.Serializable;

import javax.faces.application.FacesMessage;
import javax.faces.context.FacesContext;

import org.primefaces.event.TreeDragDropEvent;
import org.primefaces.model.DefaultTreeNode;
import org.primefaces.model.TreeNode;

public class TreeBean implements Serializable {
	
	private TreeNode root;
    
    private TreeNode root2;
	
	private TreeNode selectedNode;

    private TreeNode selectedNode2;

	public TreeBean() {
		root = new DefaultTreeNode("Root", null);
		TreeNode node0 = new DefaultTreeNode("Node 0", root);
		TreeNode node1 = new DefaultTreeNode("Node 1", root);
		TreeNode node2 = new DefaultTreeNode("Node 2", root);
		
		TreeNode node00 = new DefaultTreeNode("Node 0.0", node0);
		TreeNode node01 = new DefaultTreeNode("Node 0.1", node0);
		
		TreeNode node10 = new DefaultTreeNode("Node 1.0", node1);
		TreeNode node11 = new DefaultTreeNode("Node 1.1", node1);
		
		TreeNode node000 = new DefaultTreeNode("Node 0.0.0", node00);
		TreeNode node001 = new DefaultTreeNode("Node 0.0.1", node00);
		TreeNode node010 = new DefaultTreeNode("Node 0.1.0", node01);
		
		TreeNode node100 = new DefaultTreeNode("Node 1.0.0", node10);
        
        root2 = new DefaultTreeNode("Root2", null);
		TreeNode item0 = new DefaultTreeNode("Item 0", root2);
		TreeNode item1 = new DefaultTreeNode("Item 1", root2);
        TreeNode item2 = new DefaultTreeNode("Item 2", root2);
		
		TreeNode item00 = new DefaultTreeNode("Item 0.0", item0);
	}

	public TreeNode getRoot() {
		return root;
	}

    public TreeNode getRoot2() {
        return root2;
    }
	
	public TreeNode getSelectedNode() {
		return selectedNode;
	}
	public void setSelectedNode(TreeNode selectedNode) {
		this.selectedNode = selectedNode;
	}

	public TreeNode getSelectedNode2() {
		return selectedNode2;
	}
	public void setSelectedNode(TreeNode selectedNode2) {
		this.selectedNode2 = selectedNode2;
	}

    public void onDragDrop(TreeDragDropEvent event) {
        TreeNode dragNode = event.getDragNode();
        TreeNode dropNode = event.getDropNode();
        int dropIndex = event.getDropIndex();
        
        FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_INFO, "Dragged " + dragNode.getData(), "Dropped on " + dropNode.getData() + " at " + dropIndex);
        FacesContext.getCurrentInstance().addMessage(null, message);
    }
}
					</pre>
				</p:tab>
			</p:tabView>
		</div>

	</ui:define>
</ui:composition>